<template>
    <div>
      <el-dialog  :visible.sync="open" :before-close="cancel"  append-to-body>
        <el-form :disabled="true" ref="form" :model="form" label-width="80px">
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入客户姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同编号" prop="contractNo">
                <el-input v-model="form.contractNo" placeholder="请输入合同编号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="购买学科" prop="subject">
                <el-input v-model="form.subject" placeholder="请输入意向学科" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="活动id" prop="activityId">
                <el-input v-model="form.activityId" placeholder="请输入活动id" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="活动名称" prop="activityName">
                <el-input v-model="form.activityName" placeholder="请输入活动名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="8">
              <el-form-item label="课程名称" prop="courseName">
                <el-input v-model="form.courseName" placeholder="请输入课程名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购买价格" prop="contractOrder">
                <el-input v-model="form.contractOrder" placeholder="请输入订单价格" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="24">
              <el-link type="primary" :href="`${baseUrl}${form.fileName}`" :underline="false" target="_blank">
                <i class="el-icon-view el-icon--right"></i>预览
              </el-link>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="open = false">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import {getContract} from '@/api/crm/contract';
    export default {
        name: "contractDetails",
      props: ['id', 'show'],
      data() {
          return {
            open: this.show,
            baseUrl: process.env.VUE_APP_BASE_API,
            form: {},
          }
      },
      created() {
          getContract(this.id).then(resp => {
            this.form = resp.data;
          })
      },
      methods: {
        cancel() {
          this.$emit('input')
        }
      }
    }
</script>

<style scoped>

</style>
